import React, { Component } from 'react'
import styles from '../home-rentlist/Features.module.scss'

class Features extends Component {
    state = {
        activeTab: "overall",
    };

    handleChange = (e) => {
        // console.log(e);
        // console.log(e.target.dataset.key)
        this.setState({
            activeTab: e.target.dataset.key,
        });
        this.props.handleChange(e.target.dataset.key);
    }


    render() {
        return (
            <div className={styles.features} onClick={this.handleChange}>
                {this.props.tabs.map((tab) => {
                    return (
                        <div
                            key={tab.key}
                            data-key={tab.key}
                            className={
                                styles.featuresitem1 +
                                " " +
                                (this.state.activeTab === tab.key ? styles.active : "")
                            }
                        >
                            {tab.text}
                        </div>
                    );
                })}
                {/* <div data-key={"lock"} className={styles.featuresitem1 + '' + (this.state.activeTab === "lock" ? styles.active : "")}>智能锁</div>
                 <div data-key={"health"} className={styles.featuresitem2 + '' + (this.state.activeTab === "health" ? styles.active : "")} >带卫生间</div>
                 <div data-key={"balcony"} className={styles.featuresitem3 + '' + (this.state.activeTab === "balcony" ? styles.active : "")}>有阳台</div>
                 <div data-key={"pet"} className={styles.featuresitem4 + '' + (this.state.activeTab === "pet" ? styles.active : "")}>能养宠物</div> */}
            </div>
        )
    }
}

export default Features